(function () {
   // 点击跳转页面
   $(function () {
      $(".logo").on("click", function () {
         location = "./index.html";
      });
      $(".user-btn2 ").on("click", function () {
         location = "./carts.html";
      });
      $(".user-btn3 ").on("click", function () {
         location = "./carts.html";
      });
   });
   //  节流
   function throttle(callback, delay = 500) {
      var startTime = Date.now(); //记住起始的时间 501
      //    //这个匿名函数,在疯狂的执行中..
      return function () {
         //这个匿名函数,是移动事件来执行
         var curr = Date.now(); // 501
         //  501 -0
         if (curr - startTime >= delay) {
            callback.bind(this)();
            //下一次的开始时间,就是这次的结束时间
            startTime = curr;
         }
      };
   }

   //防抖
   function debounce(callback, delay = 200) {
      let timer = 0; //闭包解决  timer始终只有一个
      return function (e) {
         //鼠标移动的时候，执行！,里头this就只是oBox
         //   console.log(this); //box
         let self = this;
         clearTimeout(timer);
         timer = setTimeout(function () {
            callback.bind(self, e)();
         }, delay);
      };
   }

   // 放大镜
   // middleImg 小图
   // middleArea小区域
   // bigArea大区域
   // bigImg大图

   // 核心公式

   // 小图/大图=小区域/大区域
   //小区域=(小图/大图)*大区域

   //核心比例
   // 大区域/小区域
   //

   $.fn.extend({
      magnifying() {
         // 得到小于的宽和高
         $(".middleArea").css({
            width:
               ($(".middleImg").width() / $(".bigImg").width()) *
               $(".bigArea").width(),
            height:
               ($(".middleImg").height() / $(".bigImg").height()) *
               $(".bigArea").width(),
         });
         console.log($(".middleArea").height());
         // 得到核心比列
         let kernel = $(".bigArea").width() / $(".middleArea").width();
         console.log(kernel);
         // 鼠标移上小区域出现和大区域出现
         //使用节流
         $(".middleImg").mouseenter(throttle(() => {
            $(".middleArea").show();
            $(".bigArea").show();
         })
         ).mouseleave(
            throttle(() => {
               $(".middleArea").hide();
               $(".bigArea").hide();
            })
         )
            //   移动的点到页面的距离-当前元素当页面左边的距离-盒子的一半
            .mousemove(function (e) {

               let mX =
                  e.pageX - $(this).offset().left - $(".middleArea").width() / 2;
               let mY =
                  e.pageY - $(this).offset().top - $(".middleArea").height() / 2;
               if (mX < 0) {
                  mX = 0;
               }
               if (mX > $(".middleImg").width() - $(".middleArea").width()) {
                  mX = $(".middleImg").width() - $(".middleArea").width();
               }
               if (mY < 0) {
                  mY = 0;
               }
               if (mY > $(".middleImg").height() - $(".middleArea").height()) {
                  mY = $(".middleImg").height() - $(".middleArea").height();
               }
               $(".middleArea").css({
                  left: mX,
                  top: mY,
               });
               $(".bigImg").css({
                  left: mX * -kernel,
                  top: mY * -kernel,
               });
            });
         // 点击6个人物图片的时候上面大图和小图改变为这个图片 
         // 用了防抖
         $(".small").find("li").each((index, item) => {
            $(item).mouseenter(debounce(() => {
               $(".middleImg").find("img").attr("src", `images/dita/img1111/${index + 1}.jpg`);
               $(".bigArea").find("img").attr("src", `images/dita/img1111/${index + 1}.jpg`);
               $(item).stop().addClass("conten").siblings().removeClass("conten");
            }, 100)
            );
         });
         // 点击右边 T恤图片的时候左边大图和小图改变为这个图片
         // 用了防抖
         $(".list22")
            .find("img")
            .each((index, item) => {
               $(item).click(debounce(() => {
                  $(".middleImg").find("img").attr("src", `images/dita/img1111/${index + 1}1.jpg`);
                  $(".bigArea").find("img").attr("src", `images/dita/img1111/${index + 1}1.jpg`);
                  $(item).css({ border: "1px solid red" }).siblings().css("border", "").stop();
               }, 100)
               );
            });
         // 点击衣服尺寸是改变已经选择商品:尺寸
         $(".list33").find("li").each((index, item) => {
            $(item).on("click", function () {
               $(item).css({
                  border: "1px solid red"
               }).siblings().css("border", "").stop();
            });
         });
      },
   });
   $(function () {
      // 用防抖来减少频繁点击
      $(".content").magnifying();
   });

   // 模拟商品数据
   var goodsList = {
      id: 1001,
      name: "圆领短T恤 DF622072",
      price: 109,
      sl: 1,
      img: "images/dita/img1111/11.jpg",
   };

   $.fn.extend({
      shopping() {
         //因为a标签(加入购物车)它是动态创建的,通过事件委托绑定事件

         // 点击商品数量加减
         let indexL = 1;
         $(".left").on("click", function () {
            indexL++;
            $(".amount ").stop().text(indexL);
         });

         $(".right").on("click", function () {
            indexL--;
            $(".amount").stop().text(indexL);
            if (indexL <= 1) {
               indexL = 1;
            }
         });

         // 选择衣服尺码 把选中的尺码保存到模拟数据中
         $(".list33")
            .find("li")
            .each((index, item) => {
               $(item).on("click", function () {
                  goodsList.size = $(item).text();
                  $(".list55").find(".span2").text($(item).text());
                  // console.log($(item).text());
               });
            });

         //   选中衣服颜色 把选中的颜色保存到模拟数据中
         $(".list22").find("img").each((index, item) => {
            $(item).click(function () {
               goodsList.img = `images/dita/img1111/${index + 1}1.jpg`;
               goodsList.color = $(item).attr("data-id");
               $(".list55").find(".span1").text($(item).attr("data-id"));
            });
         });
         // 点击返回继续购物 就隐藏
         $(".but1").click(function () {
            $(".popup1").css({
               display: "none"
            })
            $(".popup").css({
               display: "none"
            })
         })
         // 点击去购物车结算
         $(".but2").click(function () {
            location = "./carts.html"
         })
         //1.点击加入购物车,
         $("button").on("click", function () {
            // 得到goodsList产品的颜色和尺码
            let color = goodsList.color;
            let size = goodsList.size;
            // 判断点击加入购物车的时候商品颜色是否选择,如果没有选中就提示
            if (goodsList.color == undefined) {
               alert("请选择商品");
               return;
            }
            // 判断点击加入购物车的时候商品尺码是否选择,如果没有选中就提示
            if (goodsList.size == undefined) {
               alert("请选择尺码");
               return;
            }
            // 点击加入购物车弹出遮罩层和是否到购物车界面的提示
            $(".popup1").css({
               display: "block"
            })
            $(".popup").css({
               display: "block"
            })
            //2. 获取本地cookie的数据(购物车的数据)
            let Shoppinglist = JSON.parse(localStorage.getItem("cartLsit") || "[]");
            // 判断是否已购买过
            //   如果购买过商品数量就加一
            for (let i = 0; i < Shoppinglist.length; i++) {
               $(".user-btn2").text(`购物车(${i})`);
               if (Shoppinglist[i].color == color && Shoppinglist[i].size == size) {
                  $(".user-btn2").text(`购物车(${indexL})`);
                  if (indexL > 1) {
                     Shoppinglist[i].sl = Number(Shoppinglist[i].sl) + indexL;
                  } else {
                     Shoppinglist[i].sl = Number(Shoppinglist[i].sl) + 1;
                  }
                  break;
               }
               console.log(Shoppinglist[i].sl);
            }
            localStorage.setItem("cartLsit", JSON.stringify(Shoppinglist), {
               expires: 10,
            });

            //3  some 条件有1个满足,就返回true 如果没有就把添加本地cookie的数据
            // (购物车的数据)
            let estimate = Shoppinglist.some(function (item) {
               return item.color == color && item.size == size;
            });
            if (!estimate) {
               // 并且把它们保存到本地cookie的数据(购物车的数据)
               goodsList.sl = indexL;//里面添加数量默认为1,
               goodsList.id = parseInt(Math.random() * 10000);//随机生成商品id
               Shoppinglist.push(goodsList);//如果没有就把模拟对象添加到localStorage中
            }
            localStorage.setItem("cartLsit", JSON.stringify(Shoppinglist), {
               expires: 10,
            });

         });
      },
   });
   $(function () {
      $(".content").shopping();
   });

   $(function () {
      // 获取本地数据 根据里面的数据条数把显示到购物车有几条数据
      let Shoppinglist = JSON.parse(localStorage.getItem("cartLsit") || "[]");
      $(window).on("load", function () {
         Shoppinglist.forEach((item, index) => {
            $(".user-btn2 span").text(index + 1)
            console.log(item);
         })

      })
   })
})();
